{% extends 'base.html' %}
{% set page = 'dataset' %}
{% block head %}
<style>
.table-flat {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    overflow: hidden;
}
.table-flat th, .table-flat td {
    padding: 14px 18px;
    text-align: left;
    background: #fff;
}
.table-flat th {
    background: #f7f8fa;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}
.table-flat tr {
    transition: background 0.2s;
}
.table-flat tr:hover {
    background: #f5f7fa;
}
.table-flat td {
    border-bottom: 1px solid #f0f0f0;
    color: #444;
}
.table-flat tr:last-child td {
    border-bottom: none;
}
</style>
{% endblock %}
{% block content %}
<h2>{{ t['dataset_manage'] }}</h2>
<div style="margin-bottom: 16px;">
    <button class="btn" type="button" onclick="showExportDialog()" id="exportBtn" disabled>{{ t['batch_export'] }}</button>
</div>
<table class="table-flat">
    <thead>
        <tr>
            <th><input type="checkbox" id="selectAll" onchange="toggleSelectAll()"></th>
            <th>{{ t['file_name'] }}</th>
            <th>{{ t['qa_pairs'] }}</th>
            <th>{{ t['create_time'] }}</th>
        </tr>
    </thead>
    <tbody id="datasetTableBody"></tbody>
</table>

<!-- 导出参数弹窗 -->
<div id="exportDialog" class="dialog" style="display:none;">
    <div class="dialog-content">
        <h3>{{ t['export_params'] }}</h3>
        <div style="margin:20px 0;">
            <div style="display:flex;align-items:center;gap:24px;">
                <div>
                    <label>{{ t['export_format'] }}:</label>
                    <select id="exportFormat" class="select" style="margin-left:8px;">
                        <option value="alpaca">Alpaca</option>
                        <option value="chatglm">ChatGLM</option>
                    </select>
                </div>
                <div>
                    <label>{{ t['export_type'] }}:</label>
                    <select id="exportType" class="select" style="margin-left:8px;">
                        <option value="json">JSON</option>
                        <option value="csv">CSV</option>
                        <option value="md">Markdown</option>
                    </select>
                </div>
                <div>
                    <label>{{ t['export_score'] }}:</label>
                    <select id="exportScore" class="select" style="margin-left:8px;">
                        <option value="0">{{ t['all'] or '全部' }}</option>
                        <option value="5">5★</option>
                        <option value="4">4★</option>
                        <option value="3">3★</option>
                        <option value="2">2★</option>
                        <option value="1">1★</option>
                    </select>
                </div>
            </div>
        </div>
        <div style="text-align:right;">
            <button class="btn" type="button" onclick="closeExportDialog()">{{ t['export_cancel'] }}</button>
            <button class="btn btn-primary" type="button" id="exportConfirmBtn">{{ t['export_confirm'] }}</button>
        </div>
    </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script>
window._t = {{ t|tojson }};
window._lang = "{{ lang }}";

let selectedFiles = new Set();

function toggleSelectAll() {
    const selectAll = document.getElementById('selectAll');
    const checkboxes = document.querySelectorAll('.file-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
        if (selectAll.checked) {
            selectedFiles.add(checkbox.value);
        } else {
            selectedFiles.delete(checkbox.value);
        }
    });
    updateExportButton();
}

function toggleFile(fileId) {
    if (selectedFiles.has(fileId)) {
        selectedFiles.delete(fileId);
    } else {
        selectedFiles.add(fileId);
    }
    updateExportButton();
}

function updateExportButton() {
    const exportBtn = document.getElementById('exportBtn');
    exportBtn.disabled = selectedFiles.size === 0;
}

function showExportDialog() {
    if (selectedFiles.size === 0) return;
    document.getElementById('exportDialog').style.display = 'flex';
}

function closeExportDialog() {
    document.getElementById('exportDialog').style.display = 'none';
}

document.getElementById('exportConfirmBtn').onclick = async function() {
    const format = document.getElementById('exportFormat').value;
    const type = document.getElementById('exportType').value;
    const score = document.getElementById('exportScore').value;
    closeExportDialog();
    await exportDatasets(Array.from(selectedFiles), format, type, score);
}

async function loadDatasets() {
    const resp = await fetch('/api/datasets');
    const datasets = await resp.json();
    const tbody = document.getElementById('datasetTableBody');
    tbody.innerHTML = '';
    datasets.forEach(d => {
        tbody.innerHTML += `<tr>
            <td><input type="checkbox" class="file-checkbox" value="${d.id}" onchange="toggleFile(${d.id})"></td>
            <td>${d.filename || d.name}</td>
            <td>${d.qa_count || 0}</td>
            <td>${d.created_at || ''}</td>
        </tr>`;
    });
}

async function exportDatasets(fileIds, format = 'alpaca', type = 'json', score = '0') {
    const t = window._t;
    const resp = await fetch(`/api/datasets_export?ids=${fileIds.join(',')}&format=${format}&type=${type}&score=${score}`, {method:'GET'});
    if (resp.ok) {
        const blob = await resp.blob();
        let ext = type;
        if (type === 'md') ext = 'md';
        if (type === 'csv') ext = 'csv';
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `dataset_export_${format}.${ext}`;
        a.click();
        window.URL.revokeObjectURL(url);
        ElementPlus.ElMessage.success(t['export_success']);
    } else {
        ElementPlus.ElMessage.error(t['export_fail']);
    }
}

loadDatasets();
</script>
{% endblock %} 